<template>
  <view class="order-list-item">
    <view class="content" v-if="items.length > 0">
      <!-- <card-com :title="'下单时间 ' + order.created_at" :subtitle="getOrderStatus(order)">
        <view class="product" @click="goToOrder" >
          <image class="cover" :src="product.cover_url" ></image>
          <view class="desc">
            <view class="title">购买商品：ID:{{ product.id }} {{ product.title }}</view>
            <view class="sku">购买选择：{{ sku.name }} × {{ amount }}</view>
            <view class="number">订单编号：{{ order.number }}</view>
            <view class="money">订单金额：￥{{ order.total_amount }}</view>
          </view>
        </view>
        <view class="total-amount">
          <view class="fund">实付款：</view>
          <view class="money">￥{{ order.total_amount }}</view>
          <view class="ship">（免运费）</view>
        </view>
        <order-operation-com :order="order"></order-operation-com>
      </card-com> -->
			
			<view class="order-item-card">
				<view>
					<view class="order-item-header">
						<view class="order-item-header-left">订单号：{{order.number}} </view>
						<view class="order-item-header-right">{{ order.created_at }}</view>
					</view>
					<view class="product" @click="goToOrder" v-if="order.items.length==1">
					  <image class="cover" :src="product.cover_url" ></image>
					  <view class="desc">
					    <view class="title">{{ product.title }}</view>
					   <!-- <view class="sku">购买选择：{{ sku.name }} × {{ amount }}</view>
					    <view class="number">订单编号：{{ order.number }}</view> -->
					    <view class="money">￥{{ order.total_amount }}</view>
					  </view>
					</view>
					<view class="product" v-else @click="goToOrder">
						<view v-for="(item, index) in order.items" :key="index">
							<image class="cover" :src="item.sku.pic_url" ></image>
						</view>
						
						
					</view>
					<view class="total-amount">
					  <view class="fund">共{{order.items.length}}件 实付：￥{{ order.total_amount }}</view>
					  <!-- <view class="money"></view>
					  <view class="ship">（免运费）</view> -->
					  <order-operation-com :order="order" :default-index="statusIndex" ></order-operation-com>
					</view>
					
				</view>
				
			</view>
    </view>
  </view>
</template>

<script>
import CardCom from "../common/CardCom"
import OrderOperationCom from "./OrderOperationCom"
export default {
  name: "OrderListItemCom",
  components: {
    CardCom,
    OrderOperationCom
  },
  props: [
	  'order',
	  'defaultIndex'
  ],
  data: () => ({
    items: [],
    sku: {},
    product: {},
    amount: 0,
	statusIndex: 0,
  }),
  watch: {
    order: {
      handler(val) {
				if (val && val.items) {
					this.items = val.items
					this.sku = this.items[0].sku
					this.product = this.sku.product
					this.amount = this.items[0].amount
				}
      },
      immediate: true
    },
	defaultIndex: {
	  handler(val) {
	    this.statusIndex = val
	  },
	  immediate: true
	}
  },
  methods: {
    getOrderStatus(order) {
      if (order.is_closed) {
        return '已关闭'
      }
      if (order.is_cancelled) {
        return  '已取消'
      }
      return  order.status + ' ' + order.aftersale_status
    },
    goToOrder() {
      uni.navigateTo({url: `/packs/pages/order/show?id=${this.order.id}`})
    }
	
  }
}
</script>

<style lang="scss" scoped>
.order-list-item {
  .content {
    padding: 0 20rpx;
    .product {
      display: flex;
     
	  margin-top:14rpx;
	  padding-bottom:20rpx;
	  border-bottom:2rpx solid #f2f2f2;
      .cover {
        width: 160rpx;
        height: 160rpx;
        margin-left: 26rpx;
		margin-right:18rpx;
      }
      .desc {
        width: 510rpx;
        font-size: 26rpx;
        color: #333;
		position:relative;
        .title {
          font-weight: 500;
		  margin-top:22rpx;
        }
		.money{
			position:absolute;
			top:98rpx;
		}
      }
    }
    .total-amount {
      display: block;
      font-size: 26rpx;
	  height:96rpx;
	  line-height:96rpx;
	  overflow: hidden;
      .fund {
        font-weight: 800;
		margin-left:22rpx;
		float:left;
      }
     
    }
  }
}
.order-item-card{
	width: 100%;
	border: 1px #F5F5F5 solid;
	border-radius: 10rpx;
	margin: 20rpx auto;
	.order-item-header{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top:18rpx;
		padding-bottom: 18rpx;
		border-bottom:2rpx solid #f2f2f2;
		.order-item-header-left{
			font-size: 26rpx;
			color: #333333;
			font-weight: 500;
			margin-left:22rpx;
		}
		.order-item-header-right{
			font-size: 24rpx;
			color: #333;
			font-weight: 500;
			margin-right:24rpx;
		}
	}
}
</style>
